import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
export function Draggable(props) {
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: props.id,
  });
  // CSS.Translate.toString(transform) 将transform转换为字符串，也可能为undefined，所以要判断transform是否存在，示例：translate3d(3px, 2px, 0)
  const style = transform ? {
    transform: CSS.Translate.toString(transform),
  } : undefined;

  return (
    <button ref={setNodeRef} style={style} {...listeners} {...attributes}>
      {props.children}
    </button>
  );
}